<template>
  <h1>dom操作</h1>
  <div ref="divobj">ref指定的dom对象：{{neirong}}</div>
  <input type="text" ref="userName"/>
  <button @click='getElement'>获取元素</button>
</template>

<script>
export default {
  data() {
    return {
      neirong:'内容'
    }
  },
  methods:{
    getElement() {
      //获取divobj的dom对象：this.$refs.divobj
      //输出输出<div style="color: red; font-size: 20px; background-color: blue;">bbbb</div>
      // console.log在设置前面也会输出设置的样式
      console.log(this.$refs.divobj)
      //修改divobj内容
      this.$refs.divobj.innerHTML = 'bbbb'
      this.$refs.divobj.style.color = 'red'
      this.$refs.divobj.style.fontSize = '20px'
      this.$refs.divobj.style.backgroundColor = 'blue'
      //输出<div style="color: red; font-size: 20px; background-color: blue;">bbbb</div>
      console.log(this.$refs.divobj)
      //获取输入框内容
      this.$refs.userName.value = 'nihao'
    }
  }
}
</script>


<!--
<template>
  <h1>输入绑定</h1>
  <p><input type="text" v-model='msg'></p>
  <p>输入框-实时获取输入的数据：{{ msg }}</p>

  <p>
    <input type="checkbox" id="ck" v-model='isck'>复选框-实时获取输入的数据：{{ isck }}
  </p>
  <p><input type="text" v-model.lazy='msg2'></p>
  <p>输入框-懒加载，当光标离开时候msg2才能获取到数据：{{ msg2 }}</p>
</template>

<script>
export default {
  data() {
    return {
      //smg实时跟随input输入的内容
        msg:'',
        isck:false,//input点击时就实时修改数据
       msg2:'',
      }
    },
}
</script>
-->

























